<template>
<view class="page">
	<view class="body"> 
		<view class="category-wrap">
			<view class="mod-grid m-b2" v-for="(item,index) in list" :key="index">
				<view class="label">{{item.name}}</view>
				<view class="list">
					<view class="item" :class="{'active':subitem.focus==1}" v-for="(subitem,subindex) in item.children" :key="subindex" @click="select(index,subindex)">
						<view v-if="subitem.focus==1" class="iconfont">&#xe604;</view>
						<view class="icon"><image :src="web_host+'/static/icons/'+subitem.id+'.png'" mode="widthFix"></image></view>	
						<view class="info">
							<view class="name split-line">{{subitem.name}}</view> 
						</view>						
					</view>	 	
				</view>	
			</view>	 
		</view>			
	</view>	
	<view class="footer">
		<view class="fix-wrap">
			<view class="btn" @click="submit">
				<view class="f-s32">提 交</view> 
			</view>	
		</view>
	</view>	 
	
</view>
</template>

<script>  
import {HTTP_REQUEST_URL} from '../../config.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			},
			list:[],			 
			web_host:HTTP_REQUEST_URL,
			select_ids:[]
			
		}
	},
	async onShow() {
		
	},
	async onLoad(params) { 
		this.list = await this.getFocusCrops(); 
	},
	onReachBottom(){
		 
	},
	methods:{
		 
		async getFocusCrops(){
			let res=await this.$api.user_api.getFocusCrops(); 
			if(res.data.code==0){ 
				res.data.data.forEach(item=>{
					item.children.forEach(subitem=>{
						if(subitem.focus==1){
							this.select_ids.push(subitem.id);
						}
					})
				})
				return res.data.data
			}
		},
		
		select(idx,sidx){ 
			let id=this.list[idx].children[sidx].id;
			if(this.select_ids.indexOf(id)<0){
				this.list[idx].children[sidx].focus=1;
				this.select_ids.push(this.list[idx].children[sidx].id);
			}else{
				let index=this.select_ids.indexOf(id);
				this.list[idx].children[sidx].focus=0;
				this.select_ids.splice(index,1);
			} 
		},
		
		async submit(){
			let res=await this.$api.user_api.usersetFocusCrops({
				focus_crops:this.select_ids.join(',')
			})
			console.log(res)
			if(res.data.code==0){
				uni.showToast({
					mask:true,
					title:'提交成功'
				})
				uni.navigateBack({
					delta:1
				})
				// this.$store.commit('set_focus',1)
			}
		}
		 
		
	},
	computed:{
		 
		
	},
	watch:{
		 
	},
	components:{ 
	}
}
</script>

<style scoped lang="less">
	.category-wrap{
		padding: 20rpx 0;
		width: 96%;
		margin: 0 auto;
	}
	.mod-grid{
		padding: 30rpx 0 0 30rpx;
		background: #fff;
		border-radius: 10rpx;
		.label{
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			position: relative;
			.item{
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
				height: 120rpx;
				width: 21%;
				margin: 0 20rpx 20rpx 0;
				border: 2rpx solid #eee;
				background: #f5f5f5;
				border-radius: 8rpx;
				.iconfont{
					position: absolute;
					right: 5rpx;
					top: 5rpx;
					font-size: 26rpx;
					color: #00aa7f;
				}
				.icon{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx; 
					background: #f5f5f5;
					border-radius: 10rpx;
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
				.info{
					text-align: center;
					.name{
						font-size: 28rpx; 
					}
					text{
						font-size: 28rpx;
						color: #999;
					}
				}
				
			}
			.active{
				border: 2rpx solid #00aa7f;
			}
			
		}
	} 
	.footer{
		height: 150rpx;
		.fix-wrap{
			height: 150rpx;
			background: none;
			border: 0 none;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 96%;
			height: 90rpx;
			margin: 20rpx auto;
			background: #00aa7f;
			border-radius: 8rpx;
			color: #fff;
			text-align: center;
		}
	}
	
</style>
